import React, { useState } from "react";
import { Button, Form, Input, NavBar, Toast } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { newpwd } from "store/login";

import "./passtwo.css";

const Index = () => {
  const [value, setValue] = useState("");
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();
  const dispatch = useDispatch<any>();
  const navigate = useNavigate();

  const back = () => {
    history.back();
  };

  const hisback = () => {
    setTimeout(() => {
      const data = form.getFieldsValue();
      dispatch(newpwd(data)).then((res: any) => {
        if (res) {
          if (res.payload.status === "0000") {
            navigate("/");
          }
        }
      });
    });
  };
  return (
    <div className="passwordtwo">
      <NavBar onBack={back}>设置新密码</NavBar>
      <div className="passwordbox">
        <Form layout="horizontal" mode="card" form={form}>
          <Form.Item className="password" name={"email"}>
            <Input className="input" placeholder="请输入邮箱" />
          </Form.Item>
          <Form.Item
            className="password"
            name={"pwd1"}
            rules={[{ required: true, message: "密码不同" }]}
            extra={
              <div>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <Input
              className="input"
              placeholder="请设置新密码"
              type={visible ? "text" : "password"}
            />
          </Form.Item>
          <Form.Item
            className="password"
            name={"pwd2"}
            extra={
              <div>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <Input
              className="input"
              placeholder="请再次确认密码"
              type={visible ? "text" : "password"}
            />
          </Form.Item>
        </Form>
      </div>
      <div className="btn">
        <Button block color="primary" size="middle" onClick={hisback}>
          完成
        </Button>
      </div>
    </div>
  );
};
export default Index;
